<template>
  <backContainer>
    <div class="flexBet">
      <!-- 工作站信息 -->
      <card :width="272" :top="24" class="courseInfoBox">
        <el-image
          :src="info.workstationPic"
          class="cover"
          :preview-src-list="[info.workstationPic]"
        ></el-image>
        <div class="flex principal">
          <div class="label">工作站负责人</div>
          <div class="value" style="width: 115px; word-wrap: break-word">
            {{ info.principalName }}
          </div>
        </div>
        <div class="flex principal">
          <div class="label">工作站编号</div>
          <div class="value" style="width: 140px; word-wrap: break-word">
            {{ info.workstationNum }}
          </div>
        </div>
        <div class="flex principal" style="margin-bottom: 42px">
          <div class="label">描述</div>
          <div class="value" style="width: 180px; word-wrap: break-word">
            {{ info.content }}
          </div>
        </div>
        <!-- <div class="tab">
          <el-tabs v-model="activeName">
            <el-tab-pane label="描述" name="first">{{
              info.content
            }}</el-tab-pane>
            <el-tab-pane label="关联课程" name="second">
              <div v-for="(item,index) in info.courseList" :key="index">{{ item.course_name }}</div>
            </el-tab-pane>
          </el-tabs>
        </div> -->
      </card>
      <!-- 工作站课程列表 -->
      <card :width="912" :top="24" class="courseListBox">
        <div class="flexBet top">
          <!-- 工作站信息 -->
          <div class="infoLabel">
            <div class="name">{{ info.workstationName }}</div>
            <div class="flex info">
              <img src="@/assets/images/dingwei.png" alt="加载失败"/>
              <div>{{ info.workstationAddress }}</div>
              <img
                src="@/assets/images/stu_online.png"
                alt="加载失败"
                style="margin-left: 35px"
              />
              <div>
                <span>{{ info.studyNum ? info.studyNum : 0 }}</span
                >/{{ info.stuNum }}
              </div>
            </div>
          </div>
          <!-- 按钮 -->
          <div @click="courseTypeDialog = true" class="bgbtn rela shou">
            <div class="btn flex">
              <img src="@/assets/images/add1.png" alt="加载失败"/>
              创建课程
            </div>
            <img
              class="btnbg absolute"
              src="@/assets/images/btnbg.png"
              alt="加载失败"
            />
          </div>
        </div>
        <!-- 课程列表 -->
        <div class="list flex" v-if="list.length > 0">
          <course
            @refresh="getList()"
            v-for="(item, index) in list"
            :key="index"
            :item="item"
            type="course0"
          >
          </course>
        </div>

        <div style="margin-top: 12vh" v-else>
          <el-empty description="暂无课程~"></el-empty>
        </div>
      </card>
      <el-dialog
        style="margin-top: 15vh"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="选择课程模板"
        :visible.sync="courseTypeDialog"
        width="680px"
        @close="courseTypeDialog = false"
      >
        <div class="course_create_type">
          <div @click="routeToAddCourse(1)" class="type_left">
            <div class="work_together_icon">
              <img
                class="img"
                src="@/assets/images/work_together_icon.png"
                alt="加载失败"
              />
            </div>
            <div class="text">工学一体化课程模板</div>
          </div>
          <div @click="routeToAddCourse(0)" class="type_right">
            <div class="work_together_icon">
              <img
                class="img"
                src="@/assets/images/commin_icon.png"
                alt="加载失败"
              />
            </div>
            <div class="text">通用模板</div>
          </div>
        </div>
      </el-dialog>
    </div>
  </backContainer>
</template>

<script>
import course from '@/components/course.vue'
import {
  teaWorkstationCourseList,
  getWorkstation
} from '@/api/workstation/workstation'

export default {
  components: { course },
  props: {},
  data() {
    return {
      courseTypeDialog: false,
      activeName: 'second',
      list: [],
      page: 1,
      size: 12,
      loadmore: false,
      info: ''
    }
  },
  watch: {},
  methods: {
    getInfo() {
      getWorkstation(this.$route.query.workstationId).then((res) => {
        this.info = res.data
      })
    },
    getList() {
      teaWorkstationCourseList(this.$route.query.workstationId, {
        temporaryState: 1
      }).then((res) => {
        let dataNew = []
        res.data.map((item) => {
          let obj = {
            courseId: item.course_id,
            courseName: item.course_name,
            course_num: item.course_num,
            coursePic: item.course_pic,
            status: item.status
          }
          dataNew.push(obj)
        })
        this.list = dataNew
      })
    },
    // 添加工作站按钮
    routeToAddCourse(modelType) {
      this.$router.push({
        path: '/course/add',
        query: {
          type: 'add',
          modelType,
          workstationId: this.$route.query.workstationId
        }
      })
    }
  },
  created() {
  },
  mounted() {
    this.getInfo()
    this.getList()
  }
}
</script>
<style lang="scss">
// 工作站信息
.courseInfoBox {
  overflow: auto;

  .tab {
    .el-tabs__nav-scroll {
      width: 50%;
      margin: 0 auto;
    }

    .el-tabs__item {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
    }

    .el-tabs__header {
      margin: 0;
    }

    .el-tabs__content::-webkit-scrollbar {
      display: none;
    }

    .el-tabs__content {
      height: calc(100vh - 68px - 18px - 30px - 340px);
      overflow: auto;
      margin: 10px 24px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #999999;
      line-height: 20px;
    }
  }

  .cover {
    margin: 20px 0 16px 23px;
    width: 226px;
    border-radius: 8px;
    height: 142px;
  }

  .principal {
    margin: 0 0 8px 23px;

    .label {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #999999;
      line-height: 22px;
    }

    .value {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #333333;
      line-height: 22px;
      margin-left: 16px;
    }
  }
}

.overflow_ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 工作站课程列表
.courseListBox {
  // 列表
  .temp {
    margin: 0 0 24px 24px !important;
    width: 200px !important;
    height: 168px !important;

    .coverBox {
      margin: 10px 0 0 10px !important;
      width: 180px !important;
      height: 113px !important;
    }

    .cover {
      width: 180px !important;
      height: 113px !important;
    }

    .coverTip {
    }

    .nameBox {
      margin: 12px 0 0 10px;
      width: 180px;
      font-size: 16px;
      color: #333333;
      line-height: 22px;

      .name {
        width: 160px;
      }
    }

    .infobox {
      display: none;
      margin-top: 8px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #999999;
      line-height: 20px;

      .credit {
        margin-left: 12px;
      }

      .wname {
        width: 130px;
        margin-left: 20px;
      }
    }
  }

  // 课程顶部
  .top {
    padding: 46px 15px 24px 45px;

    .infoLabel {
      .name {
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
        font-weight: 600;
        color: #333333;
        line-height: 25px;
      }

      .info {
        margin-top: 13px;

        img {
          margin-right: 4px;
          width: 18px;
          height: 18px;
        }

        div {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC, sans-serif;
          font-weight: 400;
          color: #999999;
          line-height: 20px;
        }

        span {
          color: #28b28b;
        }
      }
    }
  }
}

.course_create_type {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-bottom: 29px;
  box-sizing: border-box;

  .type_left {
    cursor: pointer;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 284px;
    background: #fafafa;
    border: 1px solid #ebebeb;

    .work_together_icon {
      width: 100%;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #44b4ae;

      .img {
        width: 94px;
        height: 92px;
        border: 1px solid #d7d7d7;
      }
    }

    .text {
      width: 100%;
      height: 79px;
      font-size: 18px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 500;
      color: #333333;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .type_right {
    cursor: pointer;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 284px;
    background: #fafafa;
    border: 1px solid #ebebeb;

    .work_together_icon {
      width: 100%;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #f7ab04;

      .img {
        width: 94px;
        height: 92px;
        border: 1px solid #d7d7d7;
      }
    }

    .text {
      width: 100%;
      height: 79px;
      font-size: 18px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 500;
      color: #333333;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
